<script>

import { Brush, Close, VideoPlay, VideoPause } from '@element-plus/icons'

export default {
  data: function () {
    return {
      pathColor: '#409EFF',
      tool: 'line',
      drawingMode: false,
      startPoint: [0, 0],
      endPoint: [0, 0]
    }
  },
  methods: {
    mouse: function (event) {
      if (event.type === 'mousedown') {
        this.drawingMode = true;
        this.startPoint = [event.offsetX, event.offsetY];
      } else if (event.type === 'mouseup') {
        this.drawingMode = false;
        if (this.tool === 'line') {
          var canvas = document.getElementById('canvas');
          var ctx = canvas.getContext('2d');
          ctx.strokeStyle = this.pathColor;
          ctx.lineWidth = 5;
          ctx.beginPath();
          ctx.moveTo(this.startPoint[0], this.startPoint[1]);
          ctx.lineTo(event.offsetX, event.offsetY);
          ctx.stroke()
        } else if (this.tool === 'rectangle') {
          var canvas = document.getElementById('canvas');
          var ctx = canvas.getContext('2d');
          ctx.strokeStyle = this.pathColor;
          ctx.lineWidth = 5;
          ctx.strokeRect(
            this.startPoint[0],
            this.startPoint[1],
            event.offsetX - this.startPoint[0],
            event.offsetY - this.startPoint[1]
          );
        }
      } else if (event.type === 'mousemove') {
        if (this.drawingMode) {
          if (this.tool === 'curve') {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.strokeStyle = this.pathColor;
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(this.startPoint[0], this.startPoint[1]);
            ctx.lineTo(event.offsetX, event.offsetY);
            ctx.stroke()
            this.startPoint = [event.offsetX, event.offsetY];
          }
        }
      } else if (event.type === 'mouseout') {
        this.drawingMode = false;
      }
    },
    setTool: function (name) {
      this.tool = name;
    },
    clear: function () {
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.lineWidth = 0;
      ctx.fillStyle = '#FFFFFF';
      ctx.fillRect(0, 0, 400, 400);
    }
  },
  components: {
    Brush,
    Close,
    VideoPlay,
    VideoPause
  }
}
</script>

<template>
  <h1>Canvas</h1>
  <div class="board">
    <canvas id="canvas" width="400" height="400" @mousedown="mouse($event)" @mouseup="mouse($event)" @mousemove="mouse($event)" @mouseout="mouse($event)" />
  </div>
  <el-row class="align-left">
    <el-col :span="2" :offset="7" class="line">
      <el-color-picker style="vertical-align: middle;" v-model="pathColor" size="small"/>
    </el-col>
    <el-col :span="2" class="line">
      <el-button @click="setTool('rectangle')" :disabled="tool==='rectangle'" type="primary">
        <el-icon class="align-middle"><VideoPlay /></el-icon>
        &nbsp;&nbsp;Rectangle
      </el-button>
    </el-col>
    <el-col :span="2" class="line">
      <el-button @click="setTool('line')" :disabled="tool==='line'" type="primary">
        <el-icon class="align-middle"><Brush /></el-icon>
        &nbsp;&nbsp;Line
      </el-button>
    </el-col>
    <el-col :span="2" class="line">
      <el-button @click="setTool('curve')" :disabled="tool==='curve'" type="primary">
        <el-icon class="align-middle"><Close /></el-icon>
        &nbsp;&nbsp;Curve
      </el-button>
    </el-col>
    <el-col :span="2" class="line">
      <el-button @click="clear()" type="danger">
        <el-icon class="align-middle"><Close /></el-icon>
        &nbsp;&nbsp;Clear
      </el-button>
    </el-col>
  </el-row>
</template>

<style scoped>
  #canvas {
    cursor: crosshair;
  }
  .board {
    margin: 20px auto;
    width: 400px;
    height: 400px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
  }
  .line {
    padding: 10px;
    line-height: 42px;
  }
  .align-left {
    text-align: left;
  }
  .align-middle {
    vertical-align: middle;
  }
</style>
